<template>
    <el-form-item label="颜色">
        <el-color-picker v-model="localRuleOption.color" size="small"></el-color-picker>
    </el-form-item>
    <el-form-item label="宽度">
        <el-input v-model="localRuleOption.width" size="mini"></el-input>
    </el-form-item>
    <el-form-item label="不透明度">
        <el-input-number
            v-model="localRuleOption.opacity"
            controls-position="right"
            :min="0"
            :max="1"
            :step="0.01"
            size="small"
        ></el-input-number>
    </el-form-item>
</template>
<script setup lang="ts">
import { onBeforeMount, ref, watch } from 'vue'
import type { Symbolizer as GeoSymbolizer, LineSymbolizer } from 'geostyler-style';
type LineStyleProps = {
    geoSymbolizer: LineSymbolizer
}
const props = withDefaults(defineProps<LineStyleProps>(), {
    geoSymbolizer: () => {
        return {
            kind: 'Line', // 规则类型
            color: '',
            width: 1,
            opacity: 1,
        }
    },
})
// 线规则
const localRuleOption = ref<LineSymbolizer>({
    kind: 'Line', // 规则类型
    color: '',
    width: 1,
    opacity: 1,
})
interface updateInnerStyleEmit {
    (e: 'updateInnerStyle', localRuleOption: GeoSymbolizer): void
}
onBeforeMount(() => {
    // 重新接收一下默认值
    localRuleOption.value = props.geoSymbolizer
    watch(
        () => props.geoSymbolizer,
        () => {
            localRuleOption.value = props.geoSymbolizer
        },
    )
})
const emit = defineEmits<updateInnerStyleEmit>()
watch(
    () => localRuleOption.value,
    () => {
        emit('updateInnerStyle', localRuleOption.value as GeoSymbolizer)
    },
    {
        deep: true,
    },
)
</script>
<style lang="scss" scoped></style>
